import React, { Component } from "react";
import { DeviceEventEmitter, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { WebView } from "react-native-webview";
import Header from "../header";
import { getWebUrl } from '../../utils/ComFunction'
import { ToastToUser } from "../../utils/CustomToast";

let navigation;

export default class WebViews extends Component {
    constructor(props) {
        super(props)
        this.state = {
            //source : this.props.source,// 外部页面，跳转。
            pageTitle: this.props.route.params.title       //页面标题
        }
    }
    handleMessage(data) {
        if (data.type = 'pay') {
            let code = data.code
            if (code === -1) {
                // ToastToUser('订单已关闭')
            } else if (code === 0) {
                ToastToUser('支付已完成')
                DeviceEventEmitter.emit('paySuccess')
                // navigation.goBack()
            } else if (code === 1) {
                // ToastToUser('订单还未支付')
            } else if (code === 2) {
                // ToastToUser('订单部分支付')
            }
        }else {
            ToastToUser('消息识别失败')
        }
    }

    render() {
        navigation = this.props.navigation;
        const runFirst = `window.ReactNativeWebView.postMessage(document.title)`;
        // const runFirst = `window.ReactNativeWebView.postMessage(JSON.stringify({type: 'pay',code: 0}))`;
        return (
            <View style={{ flex: 1 }}>
                <Header navigation={navigation} Title={this.state.pageTitle || ' '} />
                <WebView style={styles.container}
                    ref={(ref) => this.webView = ref}
                    source={{ uri: getWebUrl(this.props.route.params.source) }} injectedJavaScript={runFirst}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}
                    // cacheEnabled={false}
                    onMessage={(event) => {
                        let nativeEvent = event.nativeEvent
                        if (nativeEvent && nativeEvent.title && (!this.state.pageTitle || this.state.pageTitle == '')) {
                            this.setState({
                                pageTitle: nativeEvent.title
                            })
                        } else if (nativeEvent.data) {
                            console.log('nativeEvent.data', nativeEvent.data)
                            try {
                                if (nativeEvent.data) {
                                    let data = JSON.parse(nativeEvent.data);
                                    if (data && typeof data === 'object') {
                                        setTimeout( () => {
                                            this.handleMessage(data);
                                        }, 1000)
                                    }
                                }
                            } catch (error) {
                                // ToastToUser(nativeEvent.data + '')
                            }
                        }
                    }}
                    // 允许剪贴板写入
                    androidAllowFileAccess={true}
                    androidAllowContentAccess={true}
                    // 处理 Android 权限请求
                    onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
                />
            </View>
        )
    }

    onShouldStartLoadWithRequest = (request) => {
        
        return true;
    };
}

const styles = StyleSheet.create({
    container: {
        width: '100%'
    }
})